<template>
  <!-- 返回组件 -->
  <navTabrBack
    :navbackStyle="['padding-right: 20rpx']"
    :title="'我的关注'"
    :titleStyle="['padding: 0 28rpx;']"
  ></navTabrBack>
  <view class="index" :style="['padding: 0 28rpx;']">
    <!-- 全部委托 -->
    <view class="entrustAll">
      <text class="entAllTitle">全部用户</text>
      <!-- <view class="newEnt" @click="toEditDataList"><view class="iconfont icon--jia"></view>新建专利集</view> -->
    </view>
    <!-- 展示列表 -->
    <view class="serchItem" v-for="(item, index) in dataList" :key="index">
      <image class="serchItemImg" :src="img + item.headerImg" mode="scaleToFill" />
      <view @click="toUserInfo(item.followUserId)">
        <view class="patentTitle1">{{ item.nickName }}</view>
        <view class="patentClassify"
          ><view class="partake">联系电话：{{ item.phone }}</view>
          最后更新：{{ item.UpdatedAt.split("T")[0] }}</view
        >
      </view>
      <view @click="open(item.ID)" class="iconfont icon-a-13Bshenglve"></view>
    </view>
  </view>
  <!-- 弹窗 -->
  <uni-popup ref="popup" type="bottom" :mask-click="true">
    <view class="dataList">
      <view class="addItemTitle">取消关注后对方将从你的列表中移除</view>
      <view class="fenxiang">
        <text class="iconfont icon-quxiaoguanzhuren"></text>
        <view @click="addDataList">取消关注</view>
      </view>
    </view>
  </uni-popup>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="success" type="message">
    <uni-popup-message
      type="success"
      message="取关成功！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
</template>

<script setup>
import { onMounted, inject, reactive, toRefs, ref } from "vue";
import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
const $url = inject("$url");
const $imgSrc = inject("$imgSrc")
let data = reactive({
  userInfo: {},
  dataList: [],
  page: 1,
  id: "",
  img: ""
});

onPullDownRefresh(() => {
  data.dataList = [];
  data.page = 1;
  updataList();
  uni.stopPullDownRefresh();
});
onReachBottom(() => {
  data.page = data.page + 1;
  updataList();
});
let success = ref();
let { dataList, img } = toRefs(data);
let popup = ref();
let alertDialog = ref();
onMounted(() => {
  data.dataList = [];
  data.page = 1
  data.img = $imgSrc
  uni.getStorage({
    key: "useInfo",
    success: function (res) {
      if (res.token?.length < 1) {
        uni.navigateTo({
          url: "/pages/login/login?type=1",
        });
      }
      data.userInfo = res.data;
      updataList();
    },
  });
});
const updataList = () => {
  uni.request({
    url: $url + `/zlFollow/getZlFollowList?page=${data.page}&pageSize=10&ID=${data.userInfo.ID}`,
    method: "GET",
    timeout: 6000,
    header: {
      "x-token": data.userInfo.token,
    },
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      res.data.data.list.map(item=>{
        data.dataList.push(item)
      })
    },
  });
};
const toUserInfo = (id) => {
        uni.navigateTo({
          url: `/pages/userInfoDetile/userInfoDetile?id=${id}`,
        });
}
const open = (id) => {
  data.id = id;
  popup.value.open("button-text");
};
const addDataList = () => {
  data.dataList = [];
  uni.request({
    url: $url + `/zlFollow/deleteZlFollow`,
    method: "DELETE",
    data:{id:data.id},
    timeout: 6000,
    header: {
      "x-token": data.userInfo.token,
    },
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      updataList()
      popup.value.close();
      success.value.open();
    },
  });
};
</script>

<style scoped>
.index {
  padding-bottom: 55rpx;
}
.entrustAll {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 25rpx;
  margin-bottom: 32rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #666;
}
.entAllTitle {
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
}
.entrustAll .iconfont {
  border-radius: 50%;
  border: #666 1rpx solid;
  margin-right: 15rpx;
  font-size: 20rpx;
  padding: 8rpx;
}
.newEnt {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 展示列表 */
.serchItem {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 27rpx;
}
.serchItemImg {
  margin-right: 16rpx;
  width: 109rpx;
  height: 109rpx;
  background: #d8d8d8;
  box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(227, 227, 227, 0.5);
  border-radius: 50%;
}
.patentTitle1 {
  margin-top: 7rpx;
  width: 475rpx;
  height: 40rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.patentClassify {
  align-items: center;
  margin-top: 9rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #888888;
}
.dataList {
  padding-bottom: 1rpx;
  width: 100%;
  background: #ffffff;
  border-radius: 11rpx 11rpx 0rpx 0rpx;
}
.addItemTitle {
  display: flex;
  align-items: center;
  padding-left: 27rpx;
  margin-bottom: 24rpx;
  height: 108rpx;
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
  border-bottom: 1rpx solid #dfdfdf;
}
.fenxiang {
  display: flex;
  align-items: center;
  padding-left: 29rpx;
  margin-bottom: 47rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
}
.fenxiang text {
  color: #666666;
}
.fenxiang view {
  margin-left: 45rpx;
}
/* .partake {
  margin-right: 5rpx;
  width: 92rpx;
  height: 27rpx;
  background: #1677ff;
  box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(227, 227, 227, 0.5);
  border-radius: 7rpx;
  font-size: 22rpx;
  text-align: center;
  line-height: 27rpx;
  font-weight: 400;
  color: #ffffff;
} */
</style>
